<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
	xmlns:ui="http://java.sun.com/jsf/facelets"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:rich="http://richfaces.org/rich">
<ui:composition template="/template.xhtml">
	<ui:define name="head">
		<link
			href="#{facesContext.externalContext.requestContextPath}/css/rf/datascroller.css"
			rel="stylesheet" type="text/css" />
		<link
			href="#{facesContext.externalContext.requestContextPath}/css/rf/datatable.css"
			rel="stylesheet" type="text/css" />
	</ui:define>
	<ui:define name="content">
		<div id="head" align="center">
			<h:outputText value="#{label.searchUser}" style="font-size: 30px;" />
			<hr></hr>
		</div>
		<h:form>
			<rich:dataTable id="userSearchTable"
				value="#{userSearchAction.dataModel}" var="user">
				<rich:column>
					<f:facet name="header">
						<h:outputText value="#{label.role}" />
						<br />
						<h:commandButton value="#{label.selectRole}">
							<rich:componentControl target="selectCfTypePopup"
								operation="show" />
						</h:commandButton>
					</f:facet>
					<h:outputText value="#{user.role.label}" />
				</rich:column>
				<rich:column>
					<f:facet name="header">
						<h:outputText value="#{label.name}" />
						<br />
						<h:inputText value="#{userSearchDto.name}" />
					</f:facet>
					<h:outputText value="#{user.name}" />
				</rich:column>
				<rich:column>
					<f:facet name="header">
						<h:outputText value="#{label.middleName}" />
						<br />
						<h:inputText value="#{userSearchDto.middleName}" />
					</f:facet>
					<h:outputText value="#{user.middleName}" />
				</rich:column>
				<rich:column>
					<f:facet name="header">
						<h:outputText value="#{label.lastName}" />
						<br />
						<h:inputText value="#{userSearchDto.lastName}" />
					</f:facet>
					<h:outputText value="#{user.lastName}" />
				</rich:column>
				<rich:column>
					<f:facet name="header">
						<h:outputText value="#{label.email}" />
						<br />
						<h:inputText value="#{userSearchDto.email}" />
					</f:facet>
					<h:outputText value="#{user.email}" />
				</rich:column>
				<rich:column>
					<f:facet name="header">
						<br />
						<h:commandButton
							action="#{userSearchAction.actionSearch(userSearchDto)}"
							value="#{label.search}" />
					</f:facet>
				</rich:column>

				<f:facet name="footer">
					<rich:dataScroller id="cfTableScroller" />
				</f:facet>
			</rich:dataTable>

			<!-- Popups -->
			<rich:popupPanel id="selectCfTypePopup" modal="true"
				resizeable="true">
				<f:facet name="header">
					<h:outputText value="#{label.selectRole}" />
				</f:facet>
				<f:facet name="controls">
					<h:outputLink value="#"
						onclick="#{rich:component('selectCfTypePopup')}.hide(); return false;">
		                Close
		            </h:outputLink>
				</f:facet>
				<h:selectManyCheckbox value="#{userSearchDto.roles}"
					layout="pageDirection"
					converter="#{selectItemsBean.userRoleConverter}">
					<f:selectItems value="#{selectItemsBean.userRoles}" />
				</h:selectManyCheckbox>
			</rich:popupPanel>
		</h:form>
	</ui:define>
</ui:composition>
</html>